..<template>
  <div>
    <!-- 筛选 -->
    <div style="float: left;display: flex;margin-bottom: 10px;">
      <el-input style="margin-left: 8px;width:50%"
        @clear="initWorkflowActReProcDef"
        clearable
        prefix-icon="el-icon-search"
        placeholder="请输入流程名称"
        class="initWorkflowActReProcDef"
        v-model="processDefinitionPage.processDefinitionName"
        @keydown.enter.native="initWorkflowActReProcDefQuery">
      </el-input>
      <el-input style="margin-left: 8px;width:50%"
        @clear="initWorkflowActReProcDef"
        clearable
        prefix-icon="el-icon-search"
        placeholder="请输入流程关键字"
        class="initWorkflowActReProcDef"
        v-model="processDefinitionPage.processDefinitionKey"
        @keydown.enter.native="initWorkflowActReProcDefQuery">
      </el-input>
      <el-input style="margin-left: 8px;width:50%"
        @clear="initWorkflowActReProcDef"
        clearable
        prefix-icon="el-icon-search"
        placeholder="请输入流程类别"
        class="initWorkflowActReProcDef"
        v-model="processDefinitionPage.proDefCategory"
        @keydown.enter.native="initWorkflowActReProcDefQuery">
      </el-input>
      <el-input style="margin-left: 8px;width:50%"
        @clear="initWorkflowActReProcDef"
        clearable
        prefix-icon="el-icon-search"
        placeholder="请输入流程版本"
        class="initWorkflowActReProcDef"
        v-model="processDefinitionPage.proDefVersion"
        @keydown.enter.native="initWorkflowActReProcDefQuery">
      </el-input>
      <el-select style="margin-left: 8px;width:50%" v-model="processDefinitionPage.suspended"  @clear="initWorkflowActReProcDef" clearable placeholder="请选择流程状态">
          <el-option
          v-for="item in suspendeds"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
      </el-select>
      <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initWorkflowActReProcDefQuery">查询</el-button>
    </div>
    <div style="display: flex;justify-content: flex-end">
      <el-button
        type="primary"
        @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
      </el-button>
    </div>
<!-- 列表 -->
    <div>
        <el-table
          :data="ProcessDefinitionList"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          element-loading-text="正在加载..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
                <el-table-column
                        label="流程关键字"
                        width="150">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>流程类别: {{ scope.row.category }}</p>
                            <p>部署编号: {{ scope.row.deploymentId }}</p>
                            <p>描述信息: {{ scope.row.description }}</p>
                            <p>资源名称: {{ scope.row.diagramResourceName }}</p>
                            <p>引擎版本: {{ scope.row.engineVersion }}</p>
                            <p>流程编号: {{ scope.row.processDefinitionId }}</p>
                            <p>流程名称: {{ scope.row.processDefinitionName }}</p>
                            <p>xml名称: {{ scope.row.resourceName }}</p>
                            <p>租户编号: {{ scope.row.tenantId }}</p>
                            <p>流程版本: {{ scope.row.version }}</p>
                            <p>流程状态:
                                <el-tag type="success" v-if="scope.row.suspended==1 && scope.row.modelId != null">激活状态/新版本</el-tag>
                                <el-tag type="success" v-if="scope.row.suspended==1 && scope.row.modelId == null">激活状态/旧版本</el-tag>
                                <el-tag type="danger" v-if="scope.row.suspended==2 && scope.row.modelId != null">挂起状态/新版本</el-tag>
                                <el-tag type="danger" v-if="scope.row.suspended==2 && scope.row.modelId == null">挂起状态/旧版本</el-tag>
                            </p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.processDefinitionKey }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="流程类别"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.category }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="流程编号"
                        width="350">
                    <template slot-scope="scope">
                        <span>{{ scope.row.processDefinitionId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="流程名称"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.processDefinitionName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="流程版本"
                        width="100">
                    <template slot-scope="scope">
                        <el-tag type="success"><span>V{{ scope.row.version }}</span></el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="流程状态" width="200">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.suspended==1 && scope.row.modelId != null">激活状态/新版本</el-tag>
                        <el-tag type="success" v-if="scope.row.suspended==1 && scope.row.modelId == null">激活状态/<span style="color: #FFB340;">旧版本</span></el-tag>
                        <el-tag type="danger" v-if="scope.row.suspended==2 && scope.row.modelId != null">挂起状态/<span style="color: #67C23A;">新版本</span></el-tag>
                        <el-tag type="danger" v-if="scope.row.suspended==2 && scope.row.modelId == null">挂起状态/旧版本</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                title="流程图预览"
                                style="color: aquamarine;"
                                @click="viewActReDeployment(scope.row)"><i class="el-icon-view"></i>预览</el-button>
                        <el-button
                                type="text"
                                title="svg矢量图"
                                style="color: green;"
                                @click="doloadActReDeployment(scope.row)"><i class="el-icon-download"></i>下载</el-button>
                        <el-button
                                type="text"
                                title="当流程定义被挂起时已经发起的该流程定义的流程实例不受影响"
                                style="color: #FFB340;"
                                @click="processDefinitionStatusByProcessDefinitionId(scope.row)"><i class="el-icon-edit"></i>普通挂起|激活</el-button>
                        <el-button
                                type="text"
                                title="如果选择级联挂起则流程实例也会被挂起|激活"
                                style="color: brown;"
                                @click="processDefinitionCascadeStatus(scope.row)"><i class="el-icon-edit"></i>级联挂起|激活</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
  </div>
</template>

<script>
export default {
 name:"workflowActReProcDef",
 data(){
   return{
    loading: false,
     // 封装查询条件
    processDefinitionPage:{
      proDefCategory:'',
      processDefinitionName:'',
      processDefinitionKey:'',
      proDefVersion:'',
      whetherFilter: false,
      suspended:0,
      pageNum: 1,
      pageSize: 10
    },
    suspendeds:[{
        value: 0,
        label: '请选择'
        },{
        value: 1,
        label: '激活状态'
        },{
        value: 2,
        label: '挂起状态'
    }],
    // 初始化列表
    ProcessDefinitionList:[],
    total: 0,
    // 初始化多选复选框
    multipleSelection:[]
   }
  },
  mounted(){
    // 初始化列表
    this.initWorkflowActReProcDefQuery();
  },
 methods:{
   // 预览
   viewActReDeployment(data){
        this.$router.push({
            path: '/viewProcess',
            // 参数传递
            query: {
                processDefinitionId:data.processDefinitionId,
                viewPage:'workflowActReProcDef'
            }
        })
   },
   // 查询框清空事件
   initWorkflowActReProcDef(){
     this.resetCondition();
   },
   // 下载svg
   doloadActReDeployment(data){
        this.getRequest("/activity/ActReDeployment/query/ProcessModelSvgImage/"+data.deploymentId).then(resp => {
            if (resp) {
                const dataTrack = 'svg';
                const a = document.createElement('a');
                const name = data.processDefinitionName+`.${dataTrack}`;
                a.setAttribute(
                    'href',
                    `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(resp)}`
                );
                a.setAttribute('target', '_blank');
                a.setAttribute('dataTrack', `diagram:download-${dataTrack}`);
                a.setAttribute('download', name);
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }
        });
   },
   // 普通激活|挂起
   processDefinitionStatusByProcessDefinitionId(data){
     let suspensionStatus = data.suspended===1?2:1;
     this.putRequest("/activity/ActReProcDef/update/ProcessDefinitionStatusByProcessDefinitionId/"+data.processDefinitionId+"/"+suspensionStatus).then(resp => {
         if (resp) {
             this.initWorkflowActReProcDefQuery();
         }
     })
   },
   // 级联挂起|激活
   processDefinitionCascadeStatus(data){
    // suspensionDate: 指定挂起|激活时间|为null则为立即挂起|激活
    let param = {
      processDefinitionId:data.processDefinitionId,
      suspensionDate:null,
      suspensionStatus:data.suspended===1?2:1
    };
    this.putRequest("/activity/ActReProcDef/update/ProcessDefinitionCascadeStatus",param).then(resp => {
        if (resp) {
            this.initWorkflowActReProcDefQuery();
        }
    })
   },
   // 重置查询条件
    resetCondition(){
        this.processDefinitionPage.proDefCategory = '';
        this.processDefinitionPage.processDefinitionName = '';
        this.processDefinitionPage.processDefinitionKey = '';
        this.processDefinitionPage.proDefVersion = '';
        this.processDefinitionPage.suspended = 0;
        this.initWorkflowActReProcDefQuery();
    },
   // 初始化列表
   initWorkflowActReProcDefQuery(){
      this.loading = true;
        this.postRequest("/activity/ActReProcDef/query/ProcessDefinitionPageList",this.processDefinitionPage).then(resp => {
        this.loading = false;
        if (resp) {
          this.ProcessDefinitionList = resp.data.list;
          this.total = resp.data.total;
        }
    });
  },
  // 复选框
  handleSelectionChange(val){
    this.multipleSelection = val;
  },
   // 分页
  sizeChange(currentSize) {
    this.processDefinitionPage.pageSize = currentSize;
    this.initWorkflowActReProcDefQuery();
  },
  currentChange(currentPage) {
    this.processDefinitionPage.pageNum = currentPage;
    this.initWorkflowActReProcDefQuery();
  }
 }
}
</script>

<style>

</style>
